<template>
	<view class="c-empty" :style="[emptyStyle]">
		<image class='empty-image' :style="[emptyImgStyle]" :src='emptyImg'>
		</image>
		<view class="empty-title" :style="[emptyTitleStyle]">
			{{emptyTitle}}
		</view>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: "c-empty",
		props: {
			type: {
				type: String,
				default: "base", // sm | base | lg
			},
			direction: {
				type: String,
				default: "column", // column 列形式， row 行形式
			},
			emptyTitle: {
				type: String,
				default: "这里空空如也~"
			},
			emptyImg: {
				type: String,
				default: "/static/images/c-empty/empty.png"
			}
		},
		data() {
			return {

			};
		},
		computed: {
			emptyTitleStyle: function() {
				let result;
				switch (this.type) {
					case "sm":
						result = {
							"font-size": "22rpx"
						};
						break;
					case "base":
						result = {
							"font-size": "28rpx"
						};
						break;
					case "lg":
						result = {
							"font-size": "32rpx"
						};
						break;
					default:
						result = {
							"font-size": "28rpx"
						};
						break;
				}
				switch (this.direction) {
					case 'row':
						result = {
							...result,
							"margin-bottom": "0"
						}
						break;
				}
				return result;
			},
			emptyImgStyle: function() {
				let result;
				switch (this.type) {
					case "sm":
						result = {
							width: "74rpx",
							height: "60rpx"
						};
						break;
					case "base":
						result = {
							width: "183rpx",
							height: "150rpx"
						};
						break;
					case "lg":
						result = {
							width: "244rpx",
							height: "200rpx"
						};
						break;
					default:
						result = {
							width: "183rpx",
							height: "150rpx"
						};
						break;
				}
				return result;
			},
			emptyStyle: function() {
				let result;
				switch (this.type) {
					case "sm":
						result = {
							height: "150rpx"
						}
						break;
					case "base":
						result = {
							height: "350rpx"
						}
						break;
					case "lg":
						result = {
							height: "700rpx"
						}
						break;
					default:
						result = {
							height: "350rpx"
						}
						break;
				}
				switch (this.direction) {
					case "column":
						result = {
							...result,
							"flex-direction": "column"
						}
						break;
					case "row":
						result = {
							...result,
							"flex-direction": "row"
						}
						break;
					default:
						result = {
							...result,
							"flex-direction": "column"
						}
						break;
				}
				return result;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.c-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;

		.empty-image {}

		.empty-title {
			color: #999;
			margin-bottom: 30rpx;
			margin-top: 32rpx;
		}
	}
</style>